<template>
  <div class="p-lr-15" v-if="show">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <!-- <a-form-item label="标题" placeholder="请输入" v-if="data.type != 'grid'">
        <a-input v-model:value="data.name"></a-input>
      </a-form-item> -->
      <a-form-item
        label="占位内容"
        v-if="
          data.type != 'date' &&
          Object.keys(data.options).indexOf('placeholder') >= 0
        "
      >
        <a-input
          placeholder="请输入"
          v-model:value="data.options.placeholder"
        ></a-input>
      </a-form-item>

      <a-form-item
        class="mb-1"
        label="默认值"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
          data.type !== 'radio' &&
          data.type !== 'checkbox'
        "
      >
        <a-input
          v-if="
            data.type == 'text' || data.type == 'input' || data.type == 'select'
          "
          placeholder="请输入默认值"
          v-model:value="data.options.defaultValue"
        ></a-input>
        <a-input-number
          v-else-if="data.type == 'number'"
          v-model:value="data.options.defaultValue"
          placeholder="请输入"
        ></a-input-number>
        <a-textarea
          v-else-if="data.type == 'textarea'"
          :rows="5"
          v-model:value="data.options.defaultValue"
        ></a-textarea>
        <a-rate
          v-else-if="data.type == 'rate'"
          :allow-half="data.options.allowHalf"
          v-model:value="data.options.defaultValue"
        ></a-rate>
        <div v-else-if="data.type == 'date'">
          <div v-if="data.options.isRange">
            <a-range-picker
              v-model:value="data.options.defaultValue"
            ></a-range-picker>
          </div>
          <div v-else>
            <a-date-picker
              :valueFormat="data.options.format"
              :format="data.options.format"
              v-model:value="data.options.defaultValue"
            ></a-date-picker>
          </div>
        </div>
        <a-slider
          v-else-if="data.type == 'slider'"
          :min="data.options.min"
          :max="data.options.max"
          :step="data.options.step"
          v-model:value="data.options.defaultValue"
        />
        <a-switch
          v-else-if="data.type == 'switch'"
          v-model:checked="data.options.defaultValue"
        ></a-switch>
      </a-form-item>
      <!-- <a-form-item v-if="Object.keys(data.options).indexOf('required') >= 0" label="校验">
        <a-checkbox v-model:value="data.options.required">必填</a-checkbox>
      </a-form-item> -->
      <a-form-item
        v-if="Object.keys(data.options).indexOf('disabled') >= 0"
        label="属性"
      >
        <a-checkbox v-model:checked="data.options.disabled">禁用</a-checkbox>
      </a-form-item>
      <a-form-item
        label="宽度"
        v-if="Object.keys(data.options).indexOf('width') >= 0"
      >
        <a-slider v-model:value="data.options.width" />
      </a-form-item>

      <a-form-item label="合计" v-if="data.type == 'number'">
        <a-checkbox v-model:checked="data.isTotal">是否合计</a-checkbox>

        <a-select
          v-model:value="data.associatedFields"
          class="ml-3"
          style="width: 200px"
          v-if="data.isTotal"
        >
          <a-select-option
            v-for="(item, index) in tableFiledData"
            :key="index"
            :value="item.columnName"
          >
            {{ item.columnName }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        class="mb-1"
        label="最小值"
        v-if="Object.keys(data.options).indexOf('min') >= 0"
      >
        <a-input-number
          v-model:value="data.options.min"
          :step="1"
        ></a-input-number>
      </a-form-item>
      <a-form-item
        class="mb-1"
        label="最大值"
        v-if="Object.keys(data.options).indexOf('max') >= 0"
      >
        <a-input-number
          v-model:value="data.options.max"
          :step="1"
        ></a-input-number>
      </a-form-item>
      <a-form-item
        class="mb-1"
        label="步进值"
        v-if="Object.keys(data.options).indexOf('step') >= 0"
      >
        <a-input-number
          v-model:value="data.options.step"
          :min="0"
          :max="100"
          :step="1"
        ></a-input-number>
      </a-form-item>
      <!-- 下拉框配置 -->
      <div
        v-if="
          data.type == 'radio' ||
          data.type == 'select' ||
          data.type == 'checkbox'
        "
      >
        <a-form-item
          label="数据来源"
          class="mb-1"
          v-if="Object.keys(data.options).indexOf('options') >= 0"
        >
          <div>
            <a-radio-group v-model:value="data.options.remote">
              <a-radio-button :value="false">静态数据</a-radio-button>
              <a-radio-button :value="true">远端数据</a-radio-button>
            </a-radio-group>
          </div>

          <template v-if="data.options.remote">
            <div class="mt-1">
              <a-tabs default-active-key="1" size="small">
                <a-tab-pane key="1" tab="数据字典">
                  <a-select
                    placeholder="请选择"
                    v-model:value="data.options.remoteFunc"
                    style=""
                  >
                    <a-select-option
                      v-for="item in dictData"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>

                  <a-alert
                    class="mt-1"
                    message="请选择数据字典"
                    description="字段讲广东省佛IU士大科技国好考虑会计师的很反感."
                    type="info"
                    show-icon
                  />
                </a-tab-pane>
                <a-tab-pane key="2" tab="sql语句" force-render>
                  <a-textarea placeholder="请输入sql语句"></a-textarea>
                  <a-alert
                    class="mt-1"
                    message="请输入sql语句"
                    description="字段讲广东省佛IU士大科技国好考虑会计师的很反感."
                    type="info"
                    show-icon
                  />
                </a-tab-pane>
              </a-tabs>
            </div>
          </template>
          <template v-else>
            <div v-if="Object.keys(data.options).indexOf('showLabel') >= 0">
              <a-switch v-model:checked="data.options.showLabel"></a-switch>
              是否显示标签
            </div>
            <template v-if="data.type === 'radio' || data.type === 'select'">
              <a-radio-group v-model:value="data.options.defaultValue">
                <draggable
                  :list="data.options.options"
                  v-bind="{
                    group: { name: 'options' },
                    ghostClass: 'ghost',
                    handle: '.drag-item',
                  }"
                  itemKey="value"
                >
                  <template #item="{ element, index }">
                    <li class="mt-1">
                      <a-radio :value="element.value" style="margin-right: 5px">
                        <a-input
                          :style="{
                            width: data.options.showLabel ? '90px' : '120px',
                          }"
                          size="small"
                          v-model:value="element.value"
                        ></a-input>
                        <a-input
                          style="width: 90px"
                          size="small"
                          v-if="data.options.showLabel"
                          v-model:value="element.label"
                        ></a-input>
                      </a-radio>

                      <a-button
                        @click="handleOptionsRemove(index)"
                        circle
                        plain
                        size="small"
                      >
                        <template #icon><MinusOutlined /></template>
                      </a-button>
                      <i class="drag-item optionsClass ml-1">
                        <a-button circle plain size="small">
                          <template #icon><UnorderedListOutlined /></template>
                        </a-button>
                      </i>
                    </li>
                  </template>
                </draggable>
              </a-radio-group>
            </template>

            <template v-else-if="data.type == 'checkbox'">
              <a-checkbox-group v-model:value="data.options.defaultValue">
                <draggable
                  :list="data.options.options"
                  v-bind="{
                    group: { name: 'options' },
                    ghostClass: 'ghost',
                    handle: '.drag-item',
                  }"
                  itemKey="value"
                >
                  <template #item="{ element, index }">
                    <li style="margin-top: 10px">
                      <a-checkbox :value="element.value">
                        <a-input
                          :style="{
                            width: data.options.showLabel ? '55px' : '100px',
                          }"
                          size="small"
                          v-model:value="element.value"
                        ></a-input>
                        <a-input
                          style="width: 55px"
                          size="small"
                          v-if="data.options.showLabel"
                          v-model:value="element.label"
                        ></a-input>
                      </a-checkbox>
                      <i class="drag-item optionsClass">
                        <a-button circle plain size="small">
                          <template #icon>
                            <UnderlineOutlined />
                          </template>
                        </a-button>
                      </i>
                      <a-button
                        @click="handleOptionsRemove(index)"
                        circle
                        plain
                        size="small"
                      >
                        <MinusCircleOutlined />
                      </a-button>
                    </li>
                  </template>
                </draggable>
              </a-checkbox-group>
            </template>

            <div style="margin-left: 22px; margin-top: 10px">
              <a-button @click="handleAddOption">添加选项</a-button>
            </div>
          </template>
        </a-form-item>

        <a-form-item
          class="mb-1"
          label="布局"
          v-if="Object.keys(data.options).indexOf('inline') >= 0"
        >
          <a-radio-group v-model:value="data.options.inline">
            <a-radio-button :value="false">块级</a-radio-button>
            <a-radio-button :value="true">行内</a-radio-button>
          </a-radio-group>
        </a-form-item>
      </div>

      <!-- 日期配置 -->
      <div v-if="data.type == 'date'">
        <a-form-item label="是否为范围选择">
          <a-switch
            @change="data.options.defaultValue = null"
            v-model:checked="data.options.isRange"
          ></a-switch>
        </a-form-item>

        <a-form-item label="日期格式">
          <a-select v-model:value="data.options.format">
            <a-select-option value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
            <a-select-option value="YYYY-MM-DD HH:mm">
              YYYY-MM-DD HH:mm
            </a-select-option>
          </a-select>
        </a-form-item>

        <div v-if="!data.options.isRange">
          <a-form-item label="占位内容">
            <a-input v-model:value="data.options.placeholder"></a-input>
          </a-form-item>
          <a-form-item label="可选范围">
            <div>
              <a-range-picker
                v-model:value="data.options.disabledDate"
              ></a-range-picker>
            </div>
            <div class="mt-1">
              <a-radio-group v-model:value="data.options.disabledDateType">
                <a-radio value="1">今天以前</a-radio>
                <a-radio value="2">今天以后</a-radio>
              </a-radio-group>
              <span class="">
                <a-icon
                  @click="data.options.disabledDateType = undefined"
                  type="close"
                />
              </span>
            </div>
          </a-form-item>
        </div>
        <div v-else>
          <a-form-item label="开始占位内容">
            <a-input v-model:value="data.options.startPlaceholder"></a-input>
          </a-form-item>
          <a-form-item label="结束占位内容">
            <a-input v-model:value="data.options.endPlaceholder"></a-input>
          </a-form-item>
        </div>
      </div>

      <!-- 滑块 -->
      <div v-if="data.type == 'slider'"></div>

      <!-- 文件上传 -->
      <div v-if="data.type == 'imgupload'">
        <a-form-item>
          <div>
            <span style="color: rgba(0, 0, 0, 0.85)" class="mr-1">
              最大上传数
            </span>
            <a-input-number
              v-model:value="data.options.length"
              :min="0"
              :max="8"
              :step="1"
            ></a-input-number>
          </div>
        </a-form-item>
        <a-form-item label="上传类型">
          <a-select v-model:value="data.options.type">
            <a-select-option value="img">图片上传</a-select-option>
            <a-select-option value="file">文件上传</a-select-option>
          </a-select>
        </a-form-item>
      </div>

      <!-- 评分 -->
      <a-form-item
        label="是否允许半选"
        v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
      >
        <a-switch v-model:checked="data.options.allowHalf"></a-switch>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import { GetDictByPid } from '@/api/dictionary/api'
  import {
    MinusCircleOutlined,
    MinusOutlined,
    UnorderedListOutlined,
    UnderlineOutlined,
  } from '@ant-design/icons-vue'
  export default {
    components: {
      draggable,
      MinusCircleOutlined,
      UnderlineOutlined,
      MinusOutlined,
      UnorderedListOutlined,
    },
    // eslint-disable-next-line vue/require-prop-types
    props: ['dataAfferent', 'filedList'],
    data() {
      return {
        data: this.dataAfferent,
        validator: {
          type: null,
          required: null,
          pattern: null,
          range: null,
          length: null,
        },
        dictData: [],
        tableData: [],
        tableFiledData: [],
      }
    },
    computed: {
      show() {
        if (this.data && Object.keys(this.data).length > 0) {
          return true
        }
        return false
      },
    },

    created() {
      var that = this
      GetDictByPid().then((res) => {
        if (res.isSuccess) {
          that.dictData = res.content
        }
      })

      this.tableFiledData = this.filedList
    },
    methods: {
      //  删除选择组件的option
      handleOptionsRemove(index) {
        if (this.data.type === 'grid') {
          this.data.columns.splice(index, 1)
        } else {
          this.data.options.options.splice(index, 1)
        }
      },
      //  新增选择组件的option
      handleAddOption() {
        if (this.data.options.showLabel) {
          this.data.options.options.push({
            value: '新选项',
            label: '新选项',
          })
        } else {
          this.data.options.options.push({
            value: '新选项',
          })
        }
      },
    },
  }
</script>

<style scoped>
  .optionsClass {
    font-size: 16px;
    margin-right: 5px;
    cursor: move;
  }
  .anticon-minus {
    margin-right: 0 !important;
  }
  .anticon-unordered-list {
    margin-right: 0 !important;
  }
  .anticon-underline {
    margin-right: 0 !important;
  }
  .anticon-minus-circle {
    margin-right: 0 !important;
  }
</style>
